<template>
	<view class="new-users">
		<view class="bg"></view>
		<view class="head">
			<view class="user-card">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
					<image v-else class="avatar" src="/static/images/f.png" mode=""></image>
					<view class="info">
						<view class="name" v-if="!userInfo.uid" @tap="openAuto">请点击授权</view>
						<view class="name" v-if="userInfo.uid">
							{{ userInfo.nickname }}
							<view class="vip" v-if="userInfo.markId">{{ userInfo.markName }}</view>
						</view>
						<view class="num" v-if="userInfo.phone">
							<view class="num-txt">{{ userInfo.phone }}</view>
						</view>
						<button class="phone" plain open-type="getPhoneNumber" @getphonenumber="bindPhone"
							v-if="!userInfo.phone">绑定手机号</button>
					</view>
				</view>
				<view class="num-wrapper">
					<view class="num-item">
						<text class="num">{{ userInfo.inviteNum || 0 }}</text>
						<view class="txt acea-row row-center-wrapper"><text>邀请人数</text>
							<uni-icons type="info" size="18" color="rgba(255, 255, 255, 0.6)" @click="showInfoInvite()">
							</uni-icons>
						</view>
					</view>
					<view class="num-item">
						<text
							class="num">{{ userInfo.brokerageTotalPrice ? Number(userInfo.brokerageTotalPrice).toFixed(2) : 0 }}</text>
						<view class="txt acea-row row-center-wrapper"><text>奖励金额</text>
							<uni-icons type="info" size="18" color="rgba(255, 255, 255, 0.6)"
								@click="showInfoBrokerage()"></uni-icons>
						</view>
					</view>
				</view>
				<view class="sign" @click="goPage('/pages/users/user_vip/index')">
					{{ userInfo.markId ? '查看会员卡' : '成为会员' }}
				</view>
			</view>
			<view class="order-wrapper">
				<view class="order-hd flex">
					<view class="left">订单中心</view>
					<navigator class="right flex" hover-class="none" url="/pages/order/index" open-type="switchTab">
						查看全部
						<text class="iconfont icon-xiangyou"></text>
					</navigator>
				</view>
				<view class="order-bd">
					<block v-for="(item, index) in orderMenu" :key="index">
						<navigator class="order-item" hover-class="none" :url="item.url" open-type="switchTab">
							<view class="pic">
								<image :src="item.img" mode=""></image>
								<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
							</view>
							<view class="txt">{{ item.title }}</view>
						</navigator>
					</block>
				</view>
			</view>
		</view>
		<!-- 会员菜单 -->
		<view class="user-menus" style="margin-top: 20rpx;">
			<navigator class="item" url="/pages/users/user_spread_user/index" hover-class="none">
				<view class="left">
					<image src="/static/images/wdtg.png"></image>
					<text>我的推广</text>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</navigator>
			<navigator class="item" url="/pages/users/user_address_list/index" hover-class="none">
				<view class="left">
					<image src="/static/images/shdz.png"></image>
					<text>地址信息</text>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</navigator>
			<button class="item" open-type="contact" hover-class="none">
				<view class="left">
					<image src="/static/images/lxkf.png"></image>
					<text style="color: #333;">联系客服</text>
				</view>
				<view class="iconfont icon-xiangyou"></view>
			</button>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import authorize from '@/components/Authorize';
	import {
		getUserInfo,
		userBindPhone
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';

	const app = getApp();
	export default {
		components: {
			authorize
		},
		computed: mapGetters(['isLogin']),
		data() {
			return {
				userInfo: {},
				orderMenu: [{
						img: '/static/images/order3.png',
						title: '全部',
						url: '/pages/order/index?status=5',
						num: 0
					}, {
						img: '/static/images/order1.png',
						title: '待付款',
						url: '/pages/order/index?status=0',
						num: 0
					},
					{
						img: '/static/images/order5.png',
						title: '待自提',
						url: '/pages/order/index?status=-1',
						num: 0
					},
					{
						img: '/static/images/order2.png',
						title: '待发货',
						url: '/pages/order/index?status=1',
						num: 0
					},
					{
						img: '/static/images/order3.png',
						title: '待收货',
						url: '/pages/order/index?status=2',
						num: 0
					},
				],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		onShow: function() {
			if (this.isLogin) {
				this.isShowAuth = false;
				this.getUserInfo();
				this.getOrderData();
			} else {
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true);
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: '发现一家好店铺，分享给你～',
				path: '/pages/index/index?spid=' + this.$store.getters.uid || '',
				imageUrl: "http://image.tocj1314.com/0746056800564c178edcc3c9bfdf0be2.png"
			};
		},
		methods: {
			getOrderData() {
				let that = this;
				orderData().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '全部':
								item.num = res.data.orderCount;
								break;
							case '待付款':
								item.num = res.data.unPaidCount;
								break;
							case '待自提':
								item.num = res.data.unGetCount;
								break;
							case '待发货':
								item.num = res.data.unShippedCount;
								break;
							case '待收货':
								item.num = res.data.receivedCount;
								break;
						}
					});
					that.$set(that, 'orderMenu', that.orderMenu);
				});
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true;
			},
			// 授权回调
			onLoadFun() {
				this.getUserInfo();
				this.getOrderData();
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting);
					}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
					app.globalData.uid = res.data.uid;
				});
			},
			// 绑定手机
			bindPhone(data) {
				if (this.isLogin) {
					userBindPhone(data.detail).then(res => {
						this.getUserInfo();
					});
				} else {
					this.openAuto();
				}
			},
			// goPage
			goPage(url) {
				if (this.isLogin) {
					uni.navigateTo({
						url
					});
				} else {
					this.openAuto();
				}
			},
			showInfoInvite() {
				uni.showModal({
					title: "提示",
					content: "这里统计的是您邀请的好友通过点击您的链接下单购买，并已在门店付款，最后确认收货或者已提货，您才算成功邀请到了该好友，邀请人数这里才会增加，且邀请人数是一直累计的。",
					showCancel: false,
					confirmText: "知道了"
				})
			},
			showInfoBrokerage() {
				uni.showModal({
					title: "提示",
					content: "这里统计的是每个月已发放给您的奖励，是累计的每个月的奖励金额。",
					showCancel: false,
					confirmText: "知道了"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.new-users {
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: url('~@/static/images/user_bg.png');
			background-size: 100% 100%;
		}

		.head {
			padding: 0 15px;
			background: linear-gradient(1turn, rgba(255, 121, 49, 0), rgba(248, 74, 29, 0.82) 39%, #e93323);

			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;
				padding: 35rpx 28rpx;

				.user-info {
					z-index: 20;
					position: relative;
					display: flex;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						padding: 15rpx 0;

						.name {
							display: flex;
							align-items: center;
							color: #fff;
							font-size: 40rpx;

							.vip {
								margin-left: 12rpx;
								padding: 6rpx 20rpx;
								border-radius: 18px;
								font-size: 20rpx;
								color: #333;
								background: #ffd700;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.phone {
							width: max-content;
							border: 0;
							font-size: 28rpx;
							color: #eee;
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}
				}

				.num-wrapper {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 40rpx;
					color: #fff;

					.num-item {
						width: 33.33%;
						text-align: center;

						.num {
							font-size: 42rpx;
							font-weight: bold;
						}

						.txt {
							margin-top: 8rpx;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
						}
					}
				}

				.sign {
					position: absolute;
					top: 70rpx;
					right: 28rpx;
					z-index: 200;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx;
					background: linear-gradient(90deg, rgba(255, 225, 87, 1) 0%, rgba(238, 193, 15, 1) 100%);
					border-radius: 28rpx;
					color: #282828;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.order-wrapper {
				position: relative;
				padding: 15px 8px;
				border-radius: 10px;
				background-color: #fff;
				z-index: 11;

				.order-hd {
					justify-content: space-between;
					padding: 0 20rpx 28rpx;
					border-bottom: 1px solid #f5f5f5;
					font-size: 30rpx;
					color: #282828;

					.right {
						align-items: center;
						color: #666666;
						font-size: 26rpx;

						.icon-xiangyou {
							margin-left: 5rpx;
							margin-top: 6rpx;
							font-size: 26rpx;
						}
					}
				}

				.order-bd {
					display: flex;
					justify-content: space-between;

					.order-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 20%;
						height: 160rpx;

						.pic {
							position: relative;
							text-align: center;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.txt {
							margin-top: 15rpx;
							font-size: 26rpx;
							color: #454545;
						}
					}
				}
			}
		}

		.slider-wrapper {
			margin: 20rpx 0;
			height: 130rpx;

			swiper,
			swiper-item {
				height: 100%;
			}

			image {
				width: 100%;
				height: 130rpx;
			}
		}

		.user-menus {
			margin: 20rpx auto;
			width: 690rpx;
			border-radius: 15rpx;
			background-color: #fff;

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				padding: 0 30rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 25rpx;
					}
				}

				&::before {
					content: ' ';
					position: absolute;
					right: 0;
					bottom: 0;
					width: 655rpx;
					height: 1px;
					background-color: #eeeeee;
				}

				&:last-child::before {
					display: none;
				}
			}

			button {
				font-size: 28rpx;
			}
		}

		.order-status-num {
			min-width: 12rpx;
			background-color: #fff;
			color: #ee5a52;
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid #ee5a52;
		}
	}
</style>
